<template>
  <div class="add-layer">
    <div class="add-title" v-if="projectInfo">
      当前项目:
      <p>({{ `${projectInfo.PRJCODE} - ${projectInfo.PNAME}`}})</p>
    </div>
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item v-for="m in allLayerData" :key="m.W_SYS_ROOT_ID" :title="m.TITLENAME" :name="m.W_SYS_ROOT_ID">
        <div class="fx">
          <div @click="checkLayer(n)" v-for="n in m.child" :key="n.C_SYS_ROOT_ID" class="layer-button" :class="{ actived: n.C_SYS_ROOT_ID === nowCheckLayer }">
            <svg class="icon" aria-hidden="true"><use :xlink:href="`#icon-a-${n.FEATURECODE}`"></use></svg>
            {{ n.FEATURENAME }}
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import L from '@/libs/leaflet'
import { sessionStorage } from '@/deps/utils'
import { mapObj, getAddManagerInfo } from '../../../widgets/mapUtils'
export default {
  created() {
    this.projectInfo = sessionStorage('projectInfo')
    this.$bus.$on('CHANGE_LEFT_TAB', this.changeLeftTab)
    this.$bus.$on('SELECT_PROJECT', this.selectProject)
  },
  destroyed() {
    this.$bus.$off('CHANGE_LEFT_TAB', this.changeLeftTab)
    this.$bus.$off('SELECT_PROJECT', this.selectProject)
  },
  async mounted() {
    const allLayerData = await getAddManagerInfo()
    this.setCheck(allLayerData)
    this.allLayerData = allLayerData
  },
  data() {
    return {
      projectInfo: null,
      nowCheckLayer: '',
      activeNames: [],
      allLayerData: []
    }
  },
  methods: {
    selectProject(projectInfo) {
      this.projectInfo = projectInfo
    },
    changeLeftTab(tabData) {
      this.nowCheckLayer = ''
        mapObj.pm.disableDraw()
    },
    setCheck(data) {
      data.forEach(i => {
        this.activeNames.push(i.W_SYS_ROOT_ID)
        i.isCheck = true
        if (i.child) {
          this.setCheck(i.child)
        }
      })
    },
    handleChange(val) {
      console.log(val)
    },
    checkLayer(data) {
      if (this.nowCheckLayer === data.C_SYS_ROOT_ID) {
        this.nowCheckLayer = ''
        mapObj.pm.disableDraw()
        return
      }
      this.nowCheckLayer = data.C_SYS_ROOT_ID
      console.error(data.ADDDEVICECMD)
      this[data.ADDDEVICECMD](data)
    },
    addPoint(param) {
      let layerinfo = param
      let divIconinner = {}
      if (layerinfo.FEATURECODE) {
        let featureSize = layerinfo.FEATURESIZE > 20 ? layerinfo.FEATURESIZE : 30
        divIconinner = L.divIcon({
          className: '',
          html: `<div>
            <i class="iconfont icon-a-${layerinfo.FEATURECODE}"
            style="color: RGB(0,100,200);width:${featureSize}px; height:${featureSize}px;"
            aria-hidden="true" ></i>
            </div>`,
          iconSize: [featureSize, featureSize]
        })
      }

      mapObj.pm.enableDraw('Marker', {
        snappable: true,
        snapDistance: 20,
        cursorMarker: false,
        markerStyle: {
          icon: divIconinner
        }
      })
    },
    addPolyline(param) {
    },
    addPointRotate(param) {
    }
  }
}
</script>
<style lang="scss">
.add-layer {
  padding: 16px 8px;
  
  .el-collapse-item__header, 
  .el-collapse-item__wrap, 
  .el-collapse-item__content {
    background-color: transparent;
    color: var(--text-color);
    border-color: var(--text-color);
  }
  
  .el-collapse {
    border: 0;
    
    .fx {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      
      .layer-button {
        display: flex;
        align-items: center;
        width: calc(50% - 16px);
        margin: 16px 8px 0;
        font-size: 16px;
        cursor: pointer;
        
        @media screen and (max-width: 1550px) {
          width: calc(100% - 16px);
        }
        
        &:hover,
        &.actived {
          color: var(--color-primary);
          background: #7f7f7f94;
          border-radius: 25px;
        }
        
        .icon {
          margin-right: 16px;
          fill: var(--text-color);
          height: 30px;
          max-width: 48px;
        }
      }
    }
  }
}
</style>
